<template>
  <div class="product_resume">
    <one-title title="产品履历" @refreshData="handleRefresh"></one-title>
    <div class="resume_tree_container fixed_top_56 ">
      <resume-tree @selectNode="handleSelectNode"></resume-tree>
      <div class="product_resume_content" v-loading="isLoading">
        <resume-detail ref="resumeDetail"></resume-detail>
        <!--<AnimationEdit-->
        <!--@start="startAnimation"-->
        <!--@animationChange="handleAnimationChange"-->
        <!--&gt;</AnimationEdit>-->
        <!--<pre>{{animation}}</pre>-->
        <!--<div class="multiple_search">
          <div class="search_item">
            <div class="search_label">
              周转ID：
            </div>
            <div class="search_wrapper">
              <el-input
                v-model="curTurnoverId"
                size="small"
                placeholder="请输入周转ID"
              ></el-input>
            </div>
          </div>
          <div class="mes_btn">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="search_btn"
              @click="handleSearch">
            </el-button>
          </div>
        </div>-->
        <div class="time_lime" v-if="cardList.length > 0">
          <el-steps
            direction="vertical"
            space="150px">
            <el-step class="origin">
              <slot slot="icon">
                <div class="origin_zoom"></div>
              </slot>
            </el-step>
            <el-step
              v-for="(item, index) in cardList"
              :key="index"
              class="wow"
              :class="[animation.animationM, {warn_color : isWarnColor(item)}]"
              :data-wow-duration="animation.durationM+'s'"
              :data-wow-delay="animation.delayM+'s'">
              <slot slot="icon">
                <div><i class="iconfont" :class="traceMapping[item.productTraceTypeValue].icon || 'icon-btn_edit'"></i>
                </div>
              </slot>
              <slot slot="title">
                <step-time :animation="animation" :insertData="item"></step-time>
              </slot>
              <slot slot="description">
                <description-card :animation="animation" :insertData="item"
                                  @checkDetail="checkDetail"></description-card>
              </slot>
            </el-step>
            <el-step
              class="origin wow"
              :class="animation.animationM"
              :data-wow-duration="animation.durationM+'s'"
              :data-wow-delay="animation.delayM+'s'">
              <slot slot="icon">
                <div class="origin_zoom"></div>
              </slot>
            </el-step>
          </el-steps>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {WOW} from 'wowjs'
import {AnimationEdit, ResumeDetail, DescriptionCard, StepTime} from './components'
import traceMapping from './components/traceMapping'

export default {
  name: 'ProductResume',
  components: {
    AnimationEdit,
    ResumeDetail,
    DescriptionCard,
    StepTime
  },
  data() {
    return {
      wowObject: null,
      animation: {
        animationL: 'fadeInLeft',
        animationM: 'fadeInUp',
        animationR: 'fadeInUp',
        durationL: '2',
        durationM: '2',
        durationR: '2',
        delayL: '0',
        delayM: '0.5',
        delayR: '1',
      },
      isLoading: false,
      cardList: [], // step卡片列表
      traceMapping: traceMapping, // 履历追溯映射信息
      curTurnoverNumber: '', // 当前周转码GD-027-02
    }
  },
  mounted() {
    // this.getResumeList(this.curTurnoverNumber)
  },
  methods: {
    handleSelectNode(turnoverNumber) {
      this.curTurnoverNumber = turnoverNumber
      if (this.curTurnoverNumber) {
        this.getResumeList(this.curTurnoverNumber)
      }
    },
    // 页面刷新
    handleRefresh() {
      if (this.curTurnoverNumber) {
        this.getResumeList(this.curTurnoverNumber)
      }
    },
    /**
     * 获取履历列表
     * @param turnoverNumber 周转码
     */
    getResumeList(turnoverNumber) {
      this.cardList = []
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/productTrace/getProductTrace',
        data: {
          turnoverNumber: turnoverNumber
        },
        noCommit: true
      }).then((res) => {
        this.cardList = res.data
        this.startAnimation()
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 查看详情
    checkDetail(item) {
      this.$refs.resumeDetail.openDialog(item)
    },
    // 执行动画
    startAnimation() {
      this.$nextTick(() => { // 在dom渲染完后,再执行动画
        this.wowObject = new WOW({
          live: false,
          scrollContainer: '.product_resume_content'
        })
        this.wowObject.init()
      })
    },
    // 是否需要警戒主题色(工序级拆分/问题反馈)
    isWarnColor(item) {
      return item.productTraceTypeValue === 'TurnoverFeedBack' || item.productTraceTypeValue === 'TurnoverSplit'
    },
    // handleAnimationChange(animation) {
    //   this.animation = animation
    // },
  },
}
</script>

<style lang="less" scoped>
  .product_resume {
    overflow: hidden;
  }
</style>
<style lang="less">
  @color1: #00b4ff;
  @color1border: #b2e8ff;
  @color1hover: rgba(0, 180, 255, 0.15);
  @color2: #f5a623;
  @color2border: #fedfac;
  @color2hover: rgba(245, 166, 35, 0.15);
  @keyframes origin_zoom_inner {
    0% {
      box-shadow: 0 0 0 0 @color1border;
    }
    25%, 50%, 75% {
      box-shadow: 0 0 0 5px @color1border;
    }
    100% {
      box-shadow: 0 0 0 0 @color1border;
    }
  }

  @keyframes origin_zoom_outer {
    0% {
      box-shadow: 0 0 0 0 rgba(178, 232, 255, 0.38);
    }
    25% {
      box-shadow: 0 0 0 5px rgba(178, 232, 255, 0.38);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(178, 232, 255, 0.38);
    }
    75% {
      box-shadow: 0 0 0 5px rgba(178, 232, 255, 0.38);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(178, 232, 255, 0.38);
    }
  }

  .time_lime {
    margin-top: 40px;
    margin-left: 270px;
    .el-step.is-vertical {
      &.origin {
        flex-basis: 70px !important;
        .el-step__icon {
          margin-left: 28px;
          width: 16px;
          height: 16px;
          &.is-text {
            transform: translateY(-10px);
            border: none;
            animation: origin_zoom_outer 3s linear infinite;
          }
        }
        .origin_zoom {
          /*position: absolute;*/
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: @color1;
          animation: origin_zoom_inner 3s linear infinite;
        }
      }
      &.warn_color {
        .el-step__icon {
          &.is-text {
            border: 10px solid @color2border;
            background-color: @color2;
          }
        }
        .clock_time {
          color: #de8a00;
        }
        .description_container {
          border: solid 2px @color2;
          &:before {
            border-right: 9px solid @color2;
          }
          &:hover {
            background-color: @color2hover;
          }
          .description_title {
            color: #de8a00;
          }
          .iconfont {
            color: @color2;
          }
        }
      }
      .el-step__line {
        left: 35px;
        background-color: @color1border;
      }
      .el-step__icon {
        width: 50px;
        height: 50px;
        &.is-text {
          box-sizing: content-box;
          border: 10px solid @color1border;
          background-color: @color1;
          color: #fff;
        }
      }
      .el-step__title {
        position: absolute;
        left: -140px;
        top: 10px;
        text-align: right;
      }
      .el-step__description {
        position: absolute;
        left: 140px;
      }
    }
    .clock_time {
      font-size: 24px;
      color: #2196f3;
    }
    .date_time {
      font-size: 14px;
      color: #7e8e9f;
    }
    .description_container {
      margin-top: -10px;
      width: 600px;
      height: 96px;
      box-sizing: border-box;
      padding: 0 15px;
      border-radius: 4px;
      border: solid 2px @color1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      position: relative;
      &:before {
        content: ' ';
        position: absolute;
        /* transform: translateY(35px); */
        left: -9px;
        border-right: 9px solid #00b4ff;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        top: 0;
        bottom: 0;
        height: 0;
        margin: auto;
      }
      &:hover {
        background-color: @color1hover;
      }
      .description_title {
        font-size: 20px;
        color: #2196f3;
        margin-bottom: 20px;
      }
      .description_info {
        font-size: 16px;
        color: #333333;
        span{
          padding-right: 10px;
        }
      }
      .iconfont {
        color: @color1;
      }
    }
  }
</style>
